<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-04-17 09:27:50
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-10-08 14:05:33
 * @FilePath: \cxl-h5\src\pages\vehicleCondition\queryRecord\Index.vue
-->
<template>
    <section class="query-record-container">
        <!-- tab -->
        <section class="tab">
            <!-- <tabVue :list="data.tabList" @change="data.selectTab" :select-index="data.selectIndex" /> -->
        </section>
        <!-- 正文列表 -->
        <section class="main">
            <van-pull-refresh
                v-model="data.refreshLoading"
                @refresh="data.onRefresh"
                class="list-main van-list-container"
            >
                <van-list
                    v-model:loading="data.dataLoading"
                    :finished="data.dataFinished"
                    :finished-text="data.list.length ? '' : ''"
                    @load="data.onLoad"
                    loading-text=" "
                >
                    <List :list="data.list" :empty-status="data.listStatus" @update="data.onUpdateList" class="" />
                </van-list>
            </van-pull-refresh>
        </section>
        <!-- 筛选 -->
        <section class="filter-container">
            <section class="filter-ul">
                <section
                    :class="['filter-name', item.active || data.filter[index].index !== 0 ? 'active' : '']"
                    v-for="(item, index) in data.filter"
                    :key="item.type"
                    @click="data.onSelectType(index)"
                >
                    <span>{{ item.name }}</span>
                    <span>
                        <span :class="['iconfont', 'icon-xiangxia', item.active ? 'active' : '']"></span>
                    </span>
                </section>
            </section>
            <section class="filter-content" v-if="data.select.visible">
                <section class="filter-content-ul">
                    <section
                        :class="[
                            'filter-content-li',
                            data.filter[data.select.typeIndex].index == index ? 'active' : ''
                        ]"
                        v-for="(item, index) in data.filter[data.select.typeIndex].options"
                        :key="item.value"
                        @click="data.onSelectTypeValue(index)"
                    >
                        {{ item.label }}
                    </section>
                </section>
                <section class="shade" @click="data.onHideFilter"></section>
            </section>
        </section>

        <!-- 确认弹窗 -->
        <confirmPopupVue
            v-model="data.confirmPopup.visible"
            :title="data.confirmPopup.title"
            :content="data.confirmPopup.content"
            :cancelBtn="true"
            @cancel="
                () => {
                    data.confirmPopup.visible = false
                }
            "
            @confirm="
                () => {
                    data.confirmCancelPay()
                }
            "
        ></confirmPopupVue>
    </section>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import QueryRecord from '.'
import List from './List.vue'
import confirmPopupVue from '@/components/confirmPopup/Index.vue'

//初始化数据
const data = reactive(new QueryRecord())
</script>

<style scoped lang="scss">
.query-record-container {
    height: 100vh;
    background-color: var(--cxl-color-f2f6f8);
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    .tab {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
    }

    .main {
        height: 100%;
        box-sizing: border-box;
    }
    .list-main {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
        padding: calc(var(--cxl-size-10) + var(--cxl-size-40)) var(--cxl-size-16) 0 var(--cxl-size-16);
    }
}

.filter-container {
    height: var(--cxl-size-40);
    background-color: var(--cxl-color-white);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    .filter-ul {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .filter-name {
        font-size: var(--cxl-size-16);
        width: 20%;
        text-align: center;
        color: var(--cxl-color-333333);
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        height: var(--cxl-size-24);
        span {
            display: block;

            &:nth-child(2) {
                width: var(--cxl-size-20);
                position: relative;
                margin-left: var(--cxl-size-6);
                height: var(--cxl-size-14);
            }
        }
        .iconfont {
            font-size: var(--cxl-size-14);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotateZ(-180deg);
            transition: all 0.3s;
            &.active {
                transform: translate(-50%, -50%) rotateZ(0deg);
            }
        }
        &.active {
            color: var(--cxl-color-primary);
        }
    }
    .filter-content {
        position: fixed;
        top: var(--cxl-size-40);
        left: 0;
        bottom: 0;
        right: 0;
        .filter-content-ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #fff;
            z-index: 10;
            box-sizing: border-box;
            padding: var(--cxl-size-16);
            font-weight: 400;
        }
        .filter-content-li {
            text-align: center;
            line-height: calc(var(--cxl-size-40) + var(--cxl-size-16));
            font-size: var(--cxl-size-16);
            font-weight: 400;
            color: var(--cxl-color-333333);
            &:not(:last-child) {
                border-bottom: 1px solid var(--cxl-color-f2f6f8);
            }
            &.active {
                color: var(--cxl-color-primary);
            }
        }
        .shade {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }
    }
}
</style>
